<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :before-close="closeDialog"
      :show-close="true"
      :append-to-body="true"
      :class="{'mobile-el-dialog': showMobilePage}"
      :close-on-click-modal="true"
      class="small-common-dialog-size"
    >
      <div>
        <Title title="修改信息" style="margin-bottom: 24px;" />
        <el-form :model="editInfo" label-width="90px" class="resource-edit-dialog" label-position="right" size="small">
          <el-form-item
            v-for="(item) in editList"
            :key="item.key"
            :label="item.label"
            :maxlength="item.maxlength || ''"
          >
            <el-date-picker
              v-if="item.type === 'time'"
              v-model="editInfo[item.key]"
              :editable="false"
              class="width240-time"
              type="daterange"
              value-format="timestamp"
              size="small"
              format="yyyy/MM/dd"
              start-placeholder="开始日期"
              end-placeholder="结束日期"/>
            <el-input
              v-else
              v-model="editInfo[item.model][item.key]"
              :type="item.inputType || 'text'"
              :maxlength="item.maxlength || ''"
              placeholder="请输入"
              clearable
              class="width240" />
          </el-form-item>
        </el-form>
        <div class="edit-btn-container">
          <el-button :loading="loading" size="small" class="btn" type="primary" @click.stop="handelOk">确定</el-button>
          <el-button size="small" class="btn cancel-btn-style" type="default" plain @click.stop="closeDialog">取消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { editResourceDataInfo } from '@/api/resource';

export default {
  components: { Title },
  props: {
    // 平台，1:微信 2: 微博 3:小红书 4.抖音 5:更多  6:直播 7:B站
    platform: {
      type: String | Number,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      editInfo: {
        priceTime: [],
        invoiceInfo: {},
        sensitivityInfo: {}
      },
      authList: {}
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    editList() {
      let ans = [];
      if (this.authList.priceTimeAuth) {
        ans.push({ key: 'priceTime', label: '报价有效期', type: 'time' });
      }
      if (this.authList.invoiceInfoAuth) {
        ans = ans.concat([
          { key: 'payMethod', model: 'invoiceInfo', label: '支付方式', type: 'text', maxlength: 50 },
          { key: 'taxPoint', model: 'invoiceInfo', label: '票面税点(%)', inputType: 'number' },
          { key: 'actualTaxPoint', model: 'invoiceInfo', label: '实际税点(%)', inputType: 'number' },
          { key: 'mainName', model: 'invoiceInfo', label: '主体名(即对方公司全称)', type: 'text', maxlength: 50 }
        ]);
      }
      if (this.authList.sensitiveAuth) {
        ans = ans.concat([
          { key: 'organization', model: 'sensitivityInfo', label: '所属机构', type: 'text', maxlength: 50 },
          { key: 'businessContact', model: 'sensitivityInfo', label: '商务联系人', type: 'text', maxlength: 50 }
        ]);
      }
      return ans;
    }
  },
  methods: {
    openDialog(res, authList) {
      const data = _.cloneDeep(res);
      this.authList = authList;
      this.dialogVisible = true;
      const priceTime = data.priceTime.startTime && data.priceTime.endTime ? [data.priceTime.startTime, data.priceTime.endTime] : [];
      if (priceTime.length === 2) {
        if (priceTime[0].toString().length === 10) priceTime[0] = priceTime[0] * 1000;
        if (priceTime[1].toString().length === 10) priceTime[1] = priceTime[1] * 1000;
      }
      this.editInfo = {
        priceTime: priceTime,
        invoiceInfo: data.invoiceInfo,
        sensitivityInfo: data.sensitivityInfo,
        id: data.mediumId
      };
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    handelOk() {
      const data = this.editInfo;
      const params = {
        priceStartTime: data.priceTime[0] || '',
        priceEndTime: data.priceTime[1] || '',
        ... data.invoiceInfo,
        ...data.sensitivityInfo,
        mediumId: data.id
      };
      this.loading = true;
      editResourceDataInfo(params).then(res => {
        this.loading = false;
        if (res.code === 200) {
          this.$message.success('修改成功');
        }
        this.closeDialog();
        this.$emit('getMediumData');
      }).catch(() => {
        this.loading = false;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.width240-time {
  width: 240px;
}
.width240 {
  width: 240px;
  &::v-deep {
    .el-input__inner {
      width: 240px;
    }
  }
}
.resource-edit-dialog {
  &::v-deep {
    .el-form-item__label {
      display: flex;
      justify-content: end;
      align-items: center;
      height: 32px;
      line-height: 1.1 !important;
    }
  }
}
.edit-btn-container {
  display: flex;
  justify-content: center;
}
</style>
